import React, { ReactElement, useEffect, useState } from 'react'
import { Breadcrumb } from 'antd';
import { history } from 'umi'
const breadcrumbNameMap: any = {
    '/main': '首页',
    '/admin': '管理员',
    '/vip': '会员管理',
    '/product': '菜谱管理',
    '/meal': '套餐管理',
    '/banner': '轮播图管理',
}
let UNLISTEN;
interface Props {

}

export default function MyBreadNav({ }: Props): ReactElement {
    let [extraBreadcrumbItems, setExtraBreadcrumbItems] = useState<JSX.Element[]>()
    const getPath = () => {
        history.listen(() => {
            const nowPathName = history.location.pathname//获得当前的路径名称
            const nowPathAry = nowPathName.split('/').filter(i => i)//得到当前的英文名称
            extraBreadcrumbItems = nowPathAry.map((_, index) => {
                let url = `/${nowPathAry.slice(0, index + 1).join("/")}`
                return (
                    <Breadcrumb.Item key={url}>
                        {breadcrumbNameMap[url]}
                    </Breadcrumb.Item>
                )
            })
            setExtraBreadcrumbItems(extraBreadcrumbItems)
        })
    }
    useEffect(() => {
        getPath()
    }, [])
    return (
        <div>
            <Breadcrumb style={{ margin: '10px 0', padding: "0 24px", height: "40px", backgroundColor: "white", display: "flex", alignItems: "center" }}>
                {extraBreadcrumbItems}
            </Breadcrumb>
        </div>
    )
}
